// 1 导入路由
import { createRouter, createWebHashHistory } from 'vue-router'



// 2 引入组件
import Home from '@/views/home/home.vue'
import Login from '@/views/login/login.vue'
import Welcome from '@/views/welcome/welcome.vue'

import User from '@/views/user/user.vue'


import Roles from '@/views/roles/roles.vue'
import Rights from '@/views/rights/rights.vue'


import Reports from '@/views/reports/reports.vue'

// 3 配置路由规则
let routes = [

  {
    path: '/login', component: Login, name: 'login'
  },

  {
    path: '/',
    component: Home,
    name: 'home',

    children: [

      {
        path: 'welcome',
        name: 'welcome',
        component: Welcome
      },
      {
        name: 'users',
        path: 'users',
        component: User
      },
      {
        name: 'roles',
        path: 'roles',
        component: Roles
      },
      {
        name: 'rights',
        path: 'rights',
        component: Rights
      },
      {
        name: 'reports',
        path: 'reports',
        component: Reports
      }







    ]


  },



]

// 4. 内部提供了 history 模式的实现。为了简单起见，我们在这里使用 hash 模式。
const router = createRouter({
  history: createWebHashHistory(),
  routes  // `routes: routes` 的缩写
})





//  导航 守卫  实现路由拦截
// 注册一个全局守卫,作用是在路由跳转前,对路由进行判断,防止未登录的用户跳转到其他需要登录的页面去
router.beforeEach((to, from, next) => {
  let data = JSON.parse(window.localStorage.getItem('vuex') || '[]')
  console.log(data.token)

  // 如果已经登录，放行
  if (data && data.token) {
    next()

  } else {
    // 如果没有登录，访问非登录页面,则跳转到登录页面

    if (to.path != '/login') {

      next('/login')
    } else {
      // 如果没有登录，但访问的是登录页面,直接进入
      next()
    }

  }

})

// 5  导出路由实例
export default router